<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DD</title>
    <link rel="stylesheet" href="/static/home/css/reset.css">
    <link rel="stylesheet" href="/static/home/css/swiper.min.css">
    <style>
        * {
            -webkit-tap-highlight-color: transparent;
        }

        .main {
            color: #333;
            font-family: 'Baskerville-Bold';
        }

        .box {
            position: fixed;
            left: 40px;
            bottom: 40px;
            width: 100%;
            font-size: 84px;
            cursor: pointer;
            transition: opacity .3s;
        }

        .slogan,
        .menu {
            position: absolute;
            left: 0;
            bottom: 0;
            transition: opacity .3s;
        }

        .box:hover .menu {
            z-index: 1;
            opacity: 1;
        }

        .box:hover .slogan {
            opacity: 0;
        }

        .menu {
            opacity: 0;
        }

        .menu>a {
            color: #333;
            transition: all .3s;
        }

        .menu>a:hover {
            text-shadow: 0 0 2px rgba(0, 0, 0, 1);
        }
    </style>
    <style>
        .logo-box {
            position: fixed;
            top: 0;
            right: 0;
            transition: opacity .3s;
        }

        .logo-box:hover .logo {
            opacity: 0;
        }

        .logo-box:hover .img-box {
            opacity: 1;
            height: 400px;
        }

        .logo {
            display: block;
            height: 147px;
            width: 249px;
            margin-left: auto;
            transition: opacity .3s;
        }

        .img-box {
            opacity: 0;
            overflow: hidden;
            position: fixed;
            top: 0;
            right: 0;
            height: 0;
            width: 500px;
            transition: opacity .3s;
        }

        .img-box .swiper-container,
        .img-box .swiper-wrapper,
        .img-box .swiper-slide,
        .img-box img {
            height: 100%;
            width: 100%;
        }
    </style>
    <style>
        .main-about {
            position: fixed;
            left: 0;
            top: 0;
            opacity: 0;
            padding: 40px 60px 0;
            color: #333;
            font-family: 'microsoft yehei';
            transition: opacity .3s;
        }

        .main-about:hover {
            opacity: 1;
        }

        .main-about .ieed {
            padding-bottom: 20px;
            font-size: 46px;
            font-weight: bold;
        }

        .main-about .intro {
            line-height: 20px;
            font-size: 14px;
            letter-spacing: 2px;
        }

        .main-about span,
        .main-about img {
            display: inline-block;
            vertical-align: middle;
        }

        .main-about .mail {
            padding: 10px 0 40px 20px;
        }

        .main-about .partner {
            font-weight: bold;
        }

        .main-about .partner~img {
            padding: 10px 0 0 20px;
        }
    </style>
    <style>
        @media screen and (max-width: 420px) {
            .main-about {
                position: static;
                opacity: 1;
            }

            .logo-box {
                position: static;
            }

            .box {
                position: static;
                font-size: 48px;
            }

            .slogan,
            .menu {
                position: static;
                opacity: 1;
                text-align: center;
            }

            .menu {
                padding: 40px 0;
            }

            .menu>a {
                font-size: 40px;
            }

            .box:hover .slogan {
                opacity: 1;
            }
        }
    </style>
    <script src="/static/home/js/jquery.min.js"></script>
</head>

<body>
    <div class="main">
        <div class="logo-box">
            <img src="/static/home/images/logo.png" alt="logo" class="logo">
            <div class="img-box">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="/static/home/images/tmp1.png" alt="img1"></div>
                        <div class="swiper-slide"><img src="/static/home/images/tmp2.png" alt="img1"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="slogan">Design is a language,<br>like English.</div>
            <div class="menu">
                <a href="/home/index/thinking">
                    <div class="design">Design</div>
                </a>
                <a href="/home/index/designer">
                    <div class="designer">Designer</div>
                </a>
            </div>
        </div>
        <div class="main-about">
            <div class="ieed">IEED</div>
            <div class="intro">
                is a graphic design studio based in Beijing.<br>
                We specialize brand identities, commercials,<br>
                websites, posters, books, signage, and more.
            </div>
            <div class="mail">
                <img src="/static/home/images/icon1.png" alt="">
                <span>Jiangtao@bift.edu.cn</span>
            </div>
            <div class="partner">PANTNER</div>
            <img src="/static/home/images/icon2.png" alt="">
        </div>
    </div>
</body>
<script src="/static/home/js/swiper.min.js"></script>
<script>
    var isPhone = navigator.userAgent.match(/iPhone|Android/g);
    if (!isPhone) {
        var about = $('.main-about');
        var logo = $('.logo-box');
        var menu = $('.box');

        about.hover(function () {
            logo.css('opacity', '0');
            menu.css('opacity', '0');
        }, function () {
            logo.css('opacity', '1');
            menu.css('opacity', '1');
        });

        logo.hover(function () {
            menu.css('opacity', '0');
        }, function () {
            menu.css('opacity', '1');
        });
    }
    var swiper = new Swiper('.swiper-container');
</script>

</html>